{% extends "base.html" %}

{% block page_url %}https://httparchive.org{{ request.path }}{% endblock %}
{% block image_url %}https://httparchive.org/static/img/ha.png{% endblock %}
{% block image_height %}160{% endblock %}
{% block image_width %}320{% endblock %}
{% block image_alt %}{% endblock %}

{% block description %}List of reports the HTTP Archive Tracks creates to track various aspects of the the web: State of the Web, State of JavaScript, State of Images, Loading Speed, Progressive Web Apps, Accessibility, SEO, Page Weight, Chrome User Experience Report, and Capabilities.{% endblock %}

{% block meta %}
<meta name="description" content="{{ self.description() }}">
{%- if request.url_root != "https://httparchive.org/" %}
<meta name="robots" content="noindex">
{%- endif %}
<meta property="og:title" content="{{ self.title() }}">
<meta property="og:url" content="{{ self.page_url() }}">
<meta property="og:image" content="{{ self.image_url() }}">
<meta property="og:image:height" content="{{ self.image_height() }}">
<meta property="og:image:width" content="{{ self.image_width() }}">
<meta property="og:type" content="article">
<meta property="og:description" content="{{ self.description() }}">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@HTTPArchive">
<meta name="twitter:title" content="{{ self.title() }}">
<meta name="twitter:image" content="{{ self.image_url() }}">
<meta name="twitter:description" content="{{ self.description() }}">
{% block structured_data %}
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{ self.page_url() }}"
    },
    "headline": "{{ self.title() }}",
    "image": {
        "@type": "ImageObject",
        "url": "{{ self.image_url() }}",
        "height": {{ self.image_height() }},
        "width": {{ self.image_width() }}
    },
    "publisher": {
        "@type": "Organization",
        "name": "HTTP Archive",
        "logo": {
            "@type": "ImageObject",
            "url": "https://httparchive.org/static/img/ha.png",
            "height": 160,
            "width": 320
        },
        "sameas": [
          "https://httparchive.org",
          "https://twitter.com/HTTPArchive",
          "https://github.com/HTTPArchive"
          ]
      },
      "description": "{{ self.description() }}",
      "datePublished": "{{ date_published }}",
      "dateModified": "{{ date_modified }}"
  }
  </script>
  {% endblock %}
{% endblock %}

{% block head %}
  {{ super() }}
  <!-- Let's load our fonts nice and earlier to try to reduce the annoying swap as much as possible -->
  <link rel="preload" href="/static/fonts/opensans-latin-400.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/static/fonts/opensans-latin-700.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="{{ get_versioned_filename('/static/css/bootstrap.min.css') }}">
  <link rel="stylesheet" href="{{ get_versioned_filename('/static/css/styles.css') }}">
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <script nonce="{{ csp_nonce() }}">LUX = window.LUX || {}; LUX.samplerate = 100;</script>
  <script async defer src="https://cdn.speedcurve.com/js/lux.js?id=104609804"></script>
{% endblock %}

{% block content %}
  {% if 'legacy_welcome' in request.cookies %}
    <div class="alert alert-warning alert-dismissable" role="alert">
      <strong>
        Welcome to the
        <a href="https://discuss.httparchive.org/t/announcing-the-new-http-archive/1294">new HTTP Archive</a>!
      </strong>
      We hope you enjoy the new and improved experience.
      <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  {% endif %}
  <header>
    <div class="container">
      <div class="pddl0 col-lg-2 col-md-3 col-sm-3 col-xs-10">
        <a href="{{ url_for('index') }}">
          <img class="logo" src="/static/img/ha.png" width="320" height="160" alt="HTTP Archive"/>
        </a>
      </div>

      <div class="col-lg-10 col-md-9 col-sm-9 col-xs-2 clearfix">
        <nav class="hidden-xs pull-right text-right" aria-label="Header Menu">
          <ul>
            <li>
              <span class="dropdown-target" aria-haspopup="true" tabindex="0" role="button" title="Reports menu">
                Reports
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" aria-label="menu"><path d="M5 8l4 4 4-4z"/></svg>
              </span>

              <ul class="dropdown-content reports">
                <li><a href="{{ url_for('reports') }}">All Reports</a></li>
                {% for report in reports %}
                  <li>
                    <a href="{{ url_for('report', report_id=report.id) }}">
                      {{ report.name }}
                    </a>
                  </li>
                {% endfor %}
              </ul>
            </li>
            <li>
              <a href="https://discuss.httparchive.org">Discuss</a>
            </li>
            <li>
              <span class="dropdown-target" aria-haspopup="true" tabindex="0" role="button" title="Web Almanac menu">
                Web Almanac
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" aria-label="menu"><path d="M5 8l4 4 4-4z"/></svg>
              </span>

              <ul class="dropdown-content">
                <li>
                  <a href="https://almanac.httparchive.org/en/2020/">2020</a>
                </li>
                <li>
                  <a href="https://almanac.httparchive.org/en/2019/">2019</a>
                </li>
              </ul>
            </li>
            <li>
              <span class="dropdown-target" aria-haspopup="true" tabindex="0" role="button" title="About menu">
                About
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" aria-label="menu"><path d="M5 8l4 4 4-4z"/></svg>
              </span>

              <ul class="dropdown-content">
                <li>
                  <a href="{{ url_for('about', _anchor='mission') }}">Mission</a>
                </li>
                <li>
                  <a href="{{ url_for('about', _anchor='contribute') }}">Contribute</a>
                </li>
                <li>
                  <a href="{{ url_for('about', _anchor='contact') }}">Contact</a>
                </li>
                <li>
                  <a href="{{ url_for('faq') }}">FAQ</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>

        <button class="visible-xs hamburger" aria-label="Show navigation">
          <svg version="1.1" viewBox="0 0 32 32" height="32px" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
          </svg>
        </button>
      </div>
    </div>
  </header>
  <nav id="mobile" class="hidden-sm hidden-md hidden-lg" aria-label="Mobile Menu"></nav>

  <main>
    {% block main %}{% endblock %}
  </main>

  <footer>
    <div class="container">
      <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12">
        <a href="{{ url_for('index') }}">
          <img class="logo" src="/static/img/ha.png" width="320" height="160" alt="HTTP Archive" loading="lazy" /></a>
        <a href="https://archive.org/">
          <img src="/static/img/ia.png" width="110" height="107" alt="Internet Archive" loading="lazy" />
        </a>
      </div>

      <div class="col-lg-7 col-md-6 col-sm-12 col-xs-12 clearfix">
        <nav id="footer-links" aria-label="Footer links">
          <a href="{{ url_for('reports') }}">Reports</a>
          <a href="https://discuss.httparchive.org">Discuss</a>
          <a href="https://almanac.httparchive.org/">Web Almanac</a>
          <a href="{{ url_for('about') }}">About</a>
          <a href="{{ url_for('about', _anchor='mission') }}">Mission</a>
          <a href="{{ url_for('about', _anchor='contact') }}">Contact</a>
          <a href="{{ url_for('faq') }}">FAQ</a>
        </nav>
      </div>
    </div>
  </footer>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="{{ get_versioned_filename('/static/js/main.js') }}"></script>
{% endblock %}

{% macro report_graphic(report) %}
  {% if report.graphic %}
    {% set style = report.graphic.bgcolor and 'style="background-color: %s"' % report.graphic.bgcolor or '' %}
    <div class="figure report-graphic" {{ style | safe }}>
      {% if report.graphic.secondary %}
        {% set style = report.graphic.secondary.color and 'style="color: %s"' % report.graphic.secondary.color or '' %}
        {% if report.graphic.secondary.icon %}
          <i class="secondary-icon {{ report.graphic.secondary.icon }}" {{ style | safe }} aria-hidden="true"></i>
        {% else %}
          <div class="secondary-icon" {{ style | safe }} aria-hidden="true">
            {{ report.graphic.secondary.text }}
          </div>
        {% endif %}
      {% endif %}

      {% set style = report.graphic.primary.color and 'style="color: %s"' % report.graphic.primary.color or '' %}
      {% if report.graphic.primary.icon %}
        <i class="primary-icon {{ report.graphic.primary.icon }}" {{ style | safe }} aria-hidden="true"></i>
      {% else %}
        <div class="primary-icon" {{ style | safe }} aria-hidden="true">
          {{ report.graphic.primary.text }}
        </div>
      {% endif %}
    </div>
  {% else %}
    <div class="figure report-graphic default-report"></div>
  {% endif %}
{% endmacro %}
